@import '@/styles/common/px2rem.scss';
.shopcar{
    flex: 1;
    display: flex;
    flex-direction: column;

    .section{
        width: 100%;
        flex: 1;
        overflow-y: auto;
        // 无商品页面
        .no-content{
            font-size: px2rem(16);
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            display: none;
            .noCardPic{
                width: px2rem(80);
                height: px2rem(80);
                img{
                    width: 100%;
                }
            }
            .card-tips{
                color: #333;
                margin-top: px2rem(10);
            }
            .shop-around{
                margin-top:px2rem(20);
                a{
                    text-decoration: none;
                    display: inline-block;
                    width: px2rem(130);
                    height: px2rem(40);
                    color:#fff;
                    line-height: px2rem(40);
                    margin: 0 auto;
                    border-radius:px2rem(20);
                    background: #fe4070;
                    text-align: center;
                }
            }
        }
        // 有商品页面
        .shop-list{
            height: 100%;
            width: 100%;
            background: rgb(240, 239, 239);

            .iconfont{
                font-size: px2rem(20);
                color: #fe4070;
            }
            // 倒计时
            .count-down{
                font-size:px2rem(12);
                padding:px1rem(10);
                height: px2rem(40);
                color: #333;
                background: #fff;
                display: flex;
                align-items: center;
                padding-left: px2rem(10);
                margin-bottom: px2rem(10);
                .iconfont{
                    font-size: px2rem(20);
                    margin-right: px2rem(10);
                }
            }
            .group{
                margin-top: px2rem(10);
                background: #fff;
                .group-header{
                    font-size: px2rem(14);
                    position: relative;
                    background: #fff;
                    height: px2rem(40);
                    display: -ms-flexbox;
                    display: flex;
                    align-items: center;
                    padding-left: px2rem(10);
                    border-bottom: px2rem(1) #eee solid;
                    .iconfont{
                        font-size: px2rem(20);
                        margin-right: px2rem(10);
                    }
                }
                // 购物车内容
                .group-content{
                    width: 100%;
                    .item{
                        overflow: hidden;
                        min-height: px2rem(30);
                        display: flex;
                        align-items: center;
                        box-sizing: border-box;
                        padding: px2rem(10);
                        justify-content: space-between;

                        // 打勾勾
                        .check-box-checked {
                            display: inline-block;
                            width: px2rem(20);
                            height: px2rem(20);
                            border: px2rem(1) solid #999;
                            border-radius: 50%;
                        }
                        // 内容
                        .img-title{
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .img-wrap{
                                width:px2rem(84);
                                height:px2rem(84);
                                margin-right: px2rem(20);
                                img{
                                    width: 100%;
                                }
                            }
                            .text-wrap{
                                font-size: px1rem(16);
                                color: #333;
                                div{
                                    margin-bottom:px2rem(10);
                                }
                                .title{
                                    font-size: px2rem(12);
                                }
                                .sub-title-1,
                                .price-edit{
                                    display: flex;
                                    justify-content: space-between;
                                    font-size: px2rem(14);
                                    line-height: px2rem(20)
                                }
                                .sub-title-1{
                                    span{
                                        color: #333;
                                    }
                                }

                                // 加减数量
                                .number-editor{
                                    font-size: px2rem(12);
                                    display: none;
                                    span:nth-of-type(2){
                                        margin:0 px2rem(12);
                                    }
                                    .decrease, .increase{
                                        display: inline-block;
                                        width: px2rem(20);
                                        height: px2rem(20);
                                        border: px2rem(1) solid  rgb(180, 179, 179);
                                        border-radius: 50%;
                                        text-align: center;
                                        line-height: px2rem(20);
                                    }
                                    .increase{
                                        font-size:px2rem(16);
                                    }

                                }
                                .price-edit1{
                                    display: none;
                                    display: flex;
                                    justify-content: space-between;
                                    font-size: px2rem(14);
                                    .actions{
                                        color: rgb(177, 176, 176);
                                        .delete,
                                        .action-finish{
                                            color: #333;
                                        }
                                    }

                                }

                            }

                        }
                        // 删除提示弹框
                        .over-confirm {
                            display:none;
                        }

                    }
                }
                .group-tail {
                    height: px2rem(40);
                    font-size: px2rem(14);
                    display: flex;
                    padding-left: px2rem(10);
                    background: #fff;
                    align-items: center;
                    border-top: px2rem(1) #eee solid;
                    .iconfont{
                        font-size: px2rem(20);
                        margin-right: px2rem(10);
                    }
                }
                .red{
                    color: #fe4070;
                }
            }
        }
        // 结算
        .submit-bottom {
            position: fixed;
            bottom:px2rem(50);
            left: 0;
            right: 0;
            box-shadow: 0 0 px2rem(2) #eee;
            height: px2rem(49);
            display: flex;
            flex-direction:column;
            background: #fff;
            align-items: center;
            justify-content: center;
            z-index: 1;
            &::before{
                content: "";
                height: 1px;
                width: 100%;
                display: block;
                background-color: rgb(153, 153, 153);
                transform: scale(1, .5);
            }
            .sub-info{
                align-self: flex-start;
                display: flex;
                font-size: px2rem(14);
                color: #333;
                line-height: px2rem(49);
                margin-left: px2rem(10);
                // .check-box-checked {
                //     display: inline-block;
                    // width: px2rem(20);
                    // height: px2rem(20);
                //     border: px2rem(1) solid #999;
                //     border-radius: 50%;
                //     margin: px2rem(10) px2rem(10) 0 0;
                //  }
                    .iconfont{
                        font-size: px2rem(20);
                        color: #fe4070;
                    }

                .all-check-text{
                    color: #333;
                    font-size: px2rem(16);
                }
                .summary{
                    margin: 0 px2rem(5);
                    font-size: px2rem(12);
                    color: #999;
                    .red{
                        color: #fe4070;
                    }
                }
            }
            .submit-btn{
                align-self: flex-end;
                margin-bottom: px2rem(10);
                width: px2rem(150);
                height: px1rem(30);
                background: #fe4070;
                border-radius: px2rem(20);
                text-align: center;
                line-height: px2rem(30);
                color: #fff;
                font-size: px2rem(20);
                margin-right: px2rem(10);
                font-size: px2rem(14);
            }
        }
    }
}
